<template>
	<div>
		<swiper :options="swiperOption" ref="mySwiper">
			<!-- slides -->
			<swiper-slide><img width="100%" height="100%" src="../../assets/image/banner.png" alt=""></swiper-slide>
			<swiper-slide><img width="100%" height="100%" src="../../assets/image/banner.png" alt=""></swiper-slide>
			<swiper-slide><img width="100%" height="100%" src="../../assets/image/banner.png" alt=""></swiper-slide>
			<swiper-slide><img width="100%" height="100%" src="../../assets/image/banner.png" alt=""></swiper-slide>
			<!-- Optional controls -->
			<div class="swiper-pagination" slot="pagination"></div>
			<div class="swiper-button-prev" slot="button-prev"></div>
			<div class="swiper-button-next" slot="button-next"></div>
			<!-- <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
		</swiper>
		<!-- 轮播组件结束 -->
		<div class="zj1">
			<div><img src="../../assets/image/news_one.png"></div>
			<div class="zj1-li">
				<div @click="sendDtail" class="md">面对消费升级下的消费偏好转移，不再以价导向满足基础需求，上升为获得</div>
				<div class="zj1-sj">
					2018-06-26 <font style="padding-left:30px;">管理员</font>
					<span><img src="../../assets/image/mo.png">&nbsp;1200</span>
				</div>
			</div>
		</div>

		<!-- 2 -->
		<div class="zj2">
			<span class="md" @click="sendDtail">
				面对消费升级下的消费偏好转移，不再以价导向满足基础需求，上升为获得
			</span>
			<span class="sp">
				<li>
					<img src="/static/img/pg1.24f7fb7.png">
				</li>
				<li class="img-left">
					<img src="/static/img/pg1.24f7fb7.png">
				</li>
				<li class="img-left">
              <img src="/static/img/pg1.24f7fb7.png"></li> <li class="img-left"><img src="/static/img/pg1.24f7fb7.png"></li></span>
			<span class="sp1">
            2018-06-20 <font style="padding-left:30px;">管理员</font> <li style="margin-left:300px;"><img
					src="../../assets/image/mo.png">&nbsp;1200</li></span></div>

		<div class="zj1">
			<li><img src="../../assets/image/news_one.png"></li>
			<div class="zj1-li">
				<li class="md" @click="sendDtail">面对消费升级下的消费偏好转移，不再以价导向满足基础需求，上升为获得</li>
				<li data-v-3a30c7af="" class="zj1-sj">2018-06-26 <font style="padding-left:30px;">管理员</font>

					<span><img src="../../assets/image/mo.png">&nbsp;1200</span></li>
			</div>
		</div>
		<!-- 2 -->
		<div data-v-3a30c7af="" class="zj2"><span data-v-3a30c7af="" class="md" @click="sendDtail">
            面对消费升级下的消费偏好转移，不再以价导向满足基础需求，上升为获得

          </span>
			<span class="sp">
            <li>
              <img src="../../assets/image/pg1.png">
            </li> 
            <li class="img-left">
              <img src="../../assets/image/pg1.png">
            </li> <li class="img-left">
              <img src="../../assets/image/pg1.png"></li> <li class="img-left"><img
					src="../../assets/image/pg1.png"></li></span> <span class="sp1">
            2018-06-20 <font style="padding-left:30px;">管理员</font> <li style="margin-left:300px;"><img
					src="../../assets/image/mo.png">&nbsp;1200</li></span></div>
	</div>
</template>
<script>

	import {swiper, swiperSlide} from "vue-awesome-swiper";

	export default {
		name: "hot",
		data() {
			return {
				swiperOption: {
					//swiper3
					autoplay: 3000,
					speed: 1000,
					loop: true,
					autoplayDisableOnInteraction: false,
					prevButton: ".swiper-button-prev",
					nextButton: ".swiper-button-next",
					paginationClickable: true,
					pagination: ".swiper-pagination"
				}
			};
		},
		created() {

		},
		methods: {
			sendDtail() {
				this.$router.push({
					path: "/jobdetail",
					query: {//通过query 传递参数
						Detail: "DetailDesc",
					}
				});
			}

		},
		components: {
			swiper,
			swiperSlide
		}
	};
</script>
<style lang="scss" scoped>
	.zj1 {
		border-top: 1px solid #ccc;
		display: inline-flex;
		align-items: flex-end;
		margin-top: 30px;
		li {
			margin-top: 20px;
		}
	}

	.md {
		font-size: 19px;
		line-height: 30px;
		font-weight: bold;
	}

	.md:hover {
		color: #d42525;
		cursor: pointer;
	}

	.zj1-li li {
		margin-left: 20px;
	}

	.zj1-sj {
		font-size: 14px;
		color: #333;
	}

	.zj1-sj span {
		margin-left: 200px;
	}

	.zj2 {
		border-top: 1px solid #ccc;
		margin-top: 25px;
		display: flex;
		flex-direction: column;
		span {
			display: flex;
			flex-direction: row;
			margin-top: 15px;
		}
	}

	.sp img {
		width: 187px;
	}

	.img-left {
		margin-left: 10px;
	}

	.sp1 {
		@extend .zj1-sj;
	}
</style>
